<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name}</title>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    <link href="/static/css/font/iconfont.css" rel="stylesheet"/>

    {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}
    <link href="/static/css/pattern/online.css" rel="stylesheet"/>
</head>
<body>
<div class="title">
    在线购票
</div>
<div class="modal-body">


    <form class="layui-form layui-form-pane form-horizontal layui-col-md12" action="" >

        <div class="layui-col-md5 online_left" >

            <div class="sub_title">购票详情</div>
            <div class="form-group">
                <label class="col-sm-2 control-label">门票类型:</label>
                <div class="layui-col-md10 show_typeList">
                    {volist name="tickets_type" id="vo"}
                    <div class="layui-btn show_type {if condition='$orderDetail["type"] eq $key'} active {/if}" data-val="{$key}" >{$vo}</div>
                    {/volist}
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">选择门票:</label>
                <div class="layui-col-md10 show_list">
                    {volist name="tickets" id="vo"}
                    <div class="layui-btn layui-btn-primary {if condition='$orderDetail["tickets_id"] eq $vo["id"]'} active {/if}" data-val="{$vo.id}">{$vo.title}</div>
                    {/volist}
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">出行日期</label>
                <div class="layui-col-md8">
                    <input type="text" name="effective_time" placeholder="出行日期" class="layui-input" id="test"
                           value="{$orderDetail.effective_time}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">购买数量</label>
                <div class="layui-col-md8">
                    <input type="number" name="count" placeholder="购买数量" class="layui-input" value="{$orderDetail.count}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">购票人</label>
                <div class="layui-col-md8">
                    <input type="text" name="name" placeholder="购票人" class="layui-input" value="{$order.name}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">手机号</label>
                <div class="layui-col-md8">
                    <input type="text" name="mobile" placeholder="手机号" class="layui-input" value="{$order.mobile}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">身份证号</label>
                <div class="layui-col-md8">
                    <input type="text" name="IDcard" placeholder="身份证号" class="layui-input" value="{$order.IDcard}">
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label" style="line-height:55px;">支付方式</label>
                <div class="layui-col-md8">
                    {volist name="paytype" id="vo"}
                    <div class="paytype_class" data-val="{$vo.id}">
                        <i class="iconfont {$vo.icon}" ></i>
                        <span>{$vo.name}</span>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>


        <div class="layui-col-md6">
            <div class="sub_title">景区信息</div>
            <div class="form-group">
                <label class="col-sm-2 control-label">有效期(天)</label>
                <div class="layui-col-md6">
                    <input type="number" name="validity" placeholder="有效期" class="layui-input" disabled value="{$orderDetail.validity}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入园时间</label>
                <div class="layui-col-md6">
                    <input type="text" name="time_range" class="layui-input" placeholder=" - " disabled value="{$orderDetail.time_range}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入园地址</label>
                <div class="layui-col-md6">
                    <input type="text" name="address" placeholder="入园地址" class="layui-input" disabled value="{$orderDetail.address}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">检票次数</label>
                <div class="layui-col-md6">
                    <input type="number" name="degree" placeholder="检票次数" class="layui-input" disabled value="{$orderDetail.degree}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">价格</label>
                <div class="layui-col-md6">
                    <input type="number" step="0.01" name="price" placeholder="价格" class="layui-input" disabled value="{$orderDetail.price}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">购票须知</label>
                <div class="layui-col-md6">
                    <div class="show_content">
                        {$orderDetail.content}
                    </div>
                </div>
            </div>

        </div>

        <input type="hidden" name="list" value="{$orderDetail.tickets_id}">
        <input type="hidden" name="pay_type" value="{$order.pay_type}">
        <input type="hidden" name="order_id" value="{$order.id}">

    </form>

</div>


<!--微信支付-->
<div class="show_qrcode" >
    <div class="qrcode_content">
        <div class="show_img"><img src="/static/images/1111.png"></div>
        <div class="show_price"><span>支付金额</span>  <span class="qrcode_price">100.00元</span></div>
    </div>
    <div class="piao" ><img src="/static/images/piao.png"></div>
    <div class="show_btn"><button class="layui-btn paid">已支付</button><button class="layui-btn show_quite">取消</button></div>
</div>
<!--微信支付end-->


<!--现金支付-->
<div class="cash">
    <div class="cash_content">
        <h3>您好，请确认信息</h3>
        <div class="cash_main">
            <div class="cash_div"><span>入园日期:</span><span>2021-2-2</span></div>
            <div class="cash_div"><span>票种:</span><span>儿童票</span></div>
            <div class="cash_div"><span>数量:</span><span>1</span></div>
            <div class="cash_div"><span>入园地址:</span><span>海关后路</span></div>
            <div class="cash_div"><span>购票人:</span><span>海关后路</span></div>
            <div class="cash_div"><span>手机号:</span><span>海关后路</span></div>
            <div class="cash_div"><span>身份证号:</span><span>海关后路</span></div>
        </div>
    </div>
    <div class="piao" ><img src="/static/images/piao.png"></div>
    <div class="cash_price"><span>支付金额</span>  <span class="qrcode_price">100.00元</span></div>
    <div class="show_btn"><button class="layui-btn paid">已支付</button></div>
    <button class="layui-btn show_quite">X</button>
</div>
<!--现金支付end-->


<!--出票视图-->
<div class="warrant">
    <div class="warrant_content" id="signcode">
        <h3>请发卡</h3>
        <div class="warrant_input">
            <input type="text" name="signcode" class="layui-input" value="" placeholder="请输入卡号" >
        </div>
    </div>
    <div class="piao" ><img src="/static/images/piao.png"></div>
    <button class="layui-btn show_quite">X</button>
</div>
<!--出票视图end-->

<script>
    var createshow = 0;
    var order_id = 0;
    var signcode = 0;

    //微信轮询查询
    function showUnreadNews() {
        if (createshow == 1) {
            return false;
        }
        $.ajax({
            type: "POST",
            url: "{:URL('tickets/online/showUnreadNews')}",
            dataType: "json",
            data: {id: order_id},
            success: function (data) {
                if (data.code == 0) {
                    layer.alert(data.msg);
                    $(".show_qrcode").hide();
                    //$('input[name="order_id"]').val(0);
                    createshow = 1;
                }
            }
        });
    }
    layui.use(['form', 'laydate', 'layedit'], function () {
        var form = layui.form
            , layer = layui.layer
        var laydate = layui.laydate;
        $(".show_qrcode .show_quite").click(function () {
            $(".show_qrcode").hide();
        });
        $(".cash .show_quite").click(function () {
            $(".cash").hide();
        });
        $(".warrant .show_quite").click(function () {
            $(".warrant").hide();
        });

        //现金支付已支付按钮
        $(".paid").click(function () {
            var new_id = $("input[name='order_id']").val();
            //更新支付状态
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/updatePay')}",
                data: {id: new_id},
                dataType: 'JSON',
                success: function (res) {
                    if(res.code==0){
                        //隐藏确认视图
                        $(".cash").hide();
                        //显示出票视图
                        $(".warrant").show();
                        $("#signcode").find("input").focus();
                    }else{
                        layer.alert(res.msg);
                    }
                }
            });
        });

        $("input[name='signcode']").blur(function(){
            $("#signcode").find("input").focus();
        });
        $('#signcode').bind('input propertychange', function() {
            var showVal = $("#signcode").find("input").val();
            var id = $("input[name='order_id']").val();
            if(showVal.length==20 & signcode==0){
                var data = {id:id,signcode:showVal};
                signcode = 1;
                $.ajax({
                    type: 'post',
                    url: "{:URL('tickets/online/invoice')}",
                    data: data,
                    dataType: 'JSON',
                    success: function (res) {
                        if(res.code==0){
                            $("input[name='order_id']").val('');
                            $("#signcode").find("input").val('')
                            order_id = 0;
                            $(".warrant").hide();
                        }if(res.code==1){
                            //继续发卡
                            $("#signcode").find("input").val('')
                        }else{
                            $("#signcode").find("input").val('')
                            layer.alert(res.msg);
                            signcode = 0;
                        }
                        signcode = 0;
                    },
                });
                return false;
            }
        });


        //时间范围
        laydate.render({
            elem: '#test' //指定元素
        });

        $(".show_type").click(function () {
            var type = $(this).attr("data-val");
            $("input[name='list']").val('');
            $("input[name='pay_type']").val('');
            $(this).siblings().removeClass("active")
            $(this).addClass("active")
            //获取票列表
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/listsApi')}",
                data: {type: type},
                dataType: 'JSON',
                success: function (res) {
                    var data = res.data;
                    //生成楼栋信息
                    var html = '';
                    if(data.length==0){
                        html +=' <span class="is_error">暂无信息</span>';
                    }
                    $.each(data, function (e, v) {
                        html +=' <div class="layui-btn layui-btn-primary" data-val="'+v.id +'">'+v.title+'</div>';
                    });
                    $(".show_list").html(html);
                },
                error: function (res) {
                }
            });
        });

        $(".show_list").delegate('.layui-btn',"click",function () {
            var id = $(this).attr("data-val");
            $(this).siblings().removeClass("active")
            $(this).addClass("active")
            $("input[name='list']").val(id);
            $("input[name='pay_type']").val('');
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/detailApi')}",
                data: {id: id},
                dataType: 'JSON',
                success: function (res) {
                    var data = res.data;
                    $("input[name='price']").val(data.price);
                    $("input[name='validity']").val(data.validity);
                    $("input[name='inventory']").val(data.inventory);
                    $("input[name='address']").val(data.address);
                    $("input[name='degree']").val(data.degree);
                    $(".newContetn").html(data.content);
                    $("input[name='time_range']").val(data.time_range);
                    $(".show_content").html(data.content);
                    form.render('select');
                },
                error: function (res) {
                }
            });
        })



        $(".paytype_class").click(function () {
            var pay_type = $(this).attr("data-val");
            $(this).siblings().removeClass("active")
            $(this).addClass("active")
            $("input[name='pay_type']").val(pay_type);
            var data = $("form").serializeArray();
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/createOrder')}",
                data: data,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        $('input[name="order_id"]').val(res.order_id);
                        //弹出二维码
                        if (res.pay_type == 1) {
                            order_id = res.order_id;
                            $(".show_qrcode").show();
                            $(".qrcode_content").find("img").attr("src", res.url1);
                            $(".qrcode_price").html(res.real_pay)
                            createshow = 0;
                            setInterval('showUnreadNews()', 5000);//轮询执行，500ms一次
                        }else {
                            $(".qrcode_price").html(res.real_pay)
                            $(".cash").show();
                            $(".cash_main").html(res.html)
                            // layer.alert(res.msg);
                            //$('input[name="order_id"]').val(0);
                        }
                    }else if(res.code == 2){
                        //显示出票视图
                        $(".warrant").show();
                        $("#signcode").find("input").focus();
                    } else {
                        layer.alert(res.msg);
                    }
                },
                error: function (res) {
                }
            });

        });

        layui.form.render('select');
        form.render();
    });


</script>

</body>
</html>